<template>
  <div class="side-menu">
    <div class="menu-header">
      <img v-if="headerIcon" src="@/assets/images/fk.png" alt="">{{ title }}
    </div>
    <div
        v-for="(item, index) in menuItems"
        :key="index"
        class="menu-item"
        :class="{ active: activeMenu === item.key }"
        @click="handleMenuClick(item.key)"
    >
      <el-image style="    line-height: 2px;" v-if="item.icon" :src="`${item.icon}${activeMenu === item.key ? '1.png' : '2.png'}`"></el-image>
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import {useMenuStore} from '@/stores/menuStore';
import {onUnmounted} from "vue";

defineOptions({
  name: 'SideMenu'
})

const menuStore = useMenuStore();
const props = defineProps({
  // 菜单项配置
  menuItems: {
    type: Array,
    required: true
  },
  // 当前激活的菜单项key
  activeMenu: {
    type: String,
    required: true
  },
  // 菜单标题
  title: {
    type: String,
    default: '菜单'
  },
  // 标题图标
  headerIcon: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['menuClick']);

// 处理菜单点击
const handleMenuClick = (key) => {
  // 同时更新Pinia store和触发事件
  menuStore.setActiveMenu(key);
  emit('menuClick', key);
};
// 在组件卸载时清空菜单选择
onUnmounted(() => {
  menuStore.clearActiveMenu();
});
</script>

<style scoped lang="scss">
.side-menu {
  width: 200px;
  background: white;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px #3680FF;
  margin-right: 2px;
}

.menu-header {
  padding: 10px;
  font-weight: bold;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.menu-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  box-shadow: 0px 0px 0px 2px #409eff;
  border-radius: 30px;
}
</style>
